<!--
 * @Author: sq 8394017+sqshinibaba@user.noreply.gitee.com
 * @Date: 2024-07-29 10:23:14
 * @LastEditors: sq 8394017+sqshinibaba@user.noreply.gitee.com
 * @LastEditTime: 2024-07-29 15:25:34
 * @FilePath: /my-vue-play/src/components/test.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="line">
        <div id="mountNode"></div>
    </div>
</template>

<script>
import G6 from '@antv/g6';
export default {
    data() {
        return {
            data: {
                id: 'root',
                label: 'root',
                children: [
                    {
                        id: 'c1',
                        label: 'c1',
                        children: [
                            {
                                id: 'c1-1',
                                label: 'c1-1',
                            },
                            {
                                id: 'c1-2',
                                label: 'c1-2',
                                children: [
                                    {
                                        id: 'c1-2-1',
                                        label: 'c1-2-1',
                                    },
                                    {
                                        id: 'c1-2-2',
                                        label: 'c1-2-2',
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        id: 'c2',
                        label: 'c2',
                    },
                    {
                        id: 'c3',
                        label: 'c3',
                        children: [
                            {
                                id: 'c3-1',
                                label: 'c3-1',
                            },
                            {
                                id: 'c3-2',
                                label: 'c3-2',
                                children: [
                                    {
                                        id: 'c3-2-1',
                                        label: 'c3-2-1',
                                    },
                                    {
                                        id: 'c3-2-2',
                                        label: 'c3-2-2',
                                    },
                                    {
                                        id: 'c3-2-3',
                                        label: 'c3-2-3',
                                    },
                                ],
                            },
                            {
                                id: 'c3-3',
                                label: 'c3-333',
                            },
                        ],
                    },
                ],
            }
        }
    },
    mounted() {
        this.initG6();

    },
    methods: {
      initG6() {
         let  that = this
        const graph = new G6.Graph({
            container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
            // 画布宽高
            width:1640,
            height:800,
             fitView: true, //自适应屏幕
             fitCenter: true, //屏幕中间
             modes:{
               default:['drag-canvas', 'zoom-canvas', 'drag-node']  //允许拖拽画布、缩放画布、拖拽节点
             },
        //设置默认节点
            defaultNode:{
            //这里直接使用上面自定义的节点
              type:"service"
            },
        //设置默认边的样式
            defaultEdge:{
              type:"polyline",
           
                style: {
                //按照官网的这样写报错，可能版本原因吧
                //  endArrow: {
                //     path: G6.Arrow.triangle(10, 20, 25),
                //     d: 25,
                //     },
                //这是网上找的一个写法，具体参数是如何实现我也不知道，自己可以都是试下
                 endArrow: {
                   path: 'M 0,0 L 20,10 L 20,-10 Z',
                    d: 0,
                   fill: '#226DFF',
                    // stroke: '#0f0',
                    // opacity: 0.5,
                    // lineWidth: 3,
                },
                  stroke:"#226DFF" , 
                
                },
            }
          });
          graph.data(this.data);
            //给节点添加点击事件
             graph.on('node:click', function(ev){
                        const shape = ev.name;
                        // const item = ev.item;
                            console.log("111",shape);
                            console.log("11111");
                           
                        });
          // 渲染图
          graph.render();

      }
    }
}
</script>

<style  scoped>

.line{
          width: 95%;
          height: 800px;
          margin-left: 20px;
          margin-top: 20px;
          background-color: #eee;
          #mountNode{
            width: 100%;
            height:100%;
            }
      }
</style>